function renderTableThead() {
  let table = document.querySelector("table");
  let thead = table.querySelector("thead");
  let fragment = document.createDocumentFragment();
  renderTableRow(field.data.columns);
  function renderTableRow(row) {
    console.log(row);
    let tr = document.createElement("tr");
    for (let i = 0; i < row.length; i++) {
      let th = document.createElement("th");
      let dv = document.createElement("div");
      dv.className = "table-head-item";
      dv.textContent = row[i].title;
      th.appendChild(dv);

      tr.appendChild(th);
    }

    fragment.appendChild(tr);
  }

  thead.innerHTML = "";
  thead.appendChild(fragment);
}
// renderTableThead();

// renderTableTbody();
function renderTableTbody() {
  let table = document.querySelector("table");
  let tbody = table.querySelector("tbody");
  let fragment = document.createDocumentFragment();
  renderTableRow(tableData.data.table_data.list);
  function renderTableRow(row) {
    let trIndex = 0;
    for (let i = 0; i < row.length; i++) {
      if (trIndex <= 1050) {
        trIndex++;
        let tr = document.createElement("tr");
        let itemrow = row[i];
        let keytIndex = 0;
        if (trIndex > 200) {
          tr.className = "o_p";
        }
        for (key in itemrow) {
          let td = document.createElement("td");
          let div = document.createElement("div");
          if (keytIndex == 0) {
            td.className = "fixed";
          }
          keytIndex++;
          div.textContent = itemrow[key];
          div.className = "table-cell-item-td";
          td.appendChild(div);
          tr.appendChild(td);
        }
        fragment.appendChild(tr);
      }
    }
  }

  tbody.innerHTML = "";
  tbody.appendChild(fragment);
}

class webWorker {
  constructor(data) {
    this.fileUlr = "./webWorkerRender.js";
    this.worker = null;
  }

  init() {
    let worker = new Worker(this.fileUlr);
    this.worker = worker;
    worker.onmessage = (e) => {
      this.onmessage(e);
      
      document.querySelector("#thead").innerHTML=e.data;
    };
  }
  onmessage(e) {
    console.log(e);
  }
  postMessage(data) {
    console.log(data);
    this.worker.postMessage(data);
  }
}

let webWorkerInstance = new webWorker();
webWorkerInstance.init();

class MyTable {
  constructor() {
    this.table = document.querySelector("table");
    this.thead = this.table.querySelector("thead");
    this.tbody = this.table.querySelector("tbody");
  }
  renderTableThead(columns) {
    webWorkerInstance.postMessage(columns);
  }
}

let MyTableInstance = new MyTable();

//渲染table thead
MyTableInstance.renderTableThead({
  action: "readerThead",
  columns: field.data.columns,
});
